<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限管理页面</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="js/zTree/css/metroStyle/metroStyle.css">
    <style type="text/css">
        #ztree {
            width: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-lg3">
        <ul id="ztree" class="ztree"></ul>
    </div>
    <div class="layui-col-lg9">
        <table id="permissTab" class="layui-hide" lay-filter="permissTab"></table>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript" src="js/zTree/js/jquery.ztree.all.js"></script>
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var layer = layui.layer, form = layui.form, table = layui.table;
        table.render({
            elem: '#permissTab'
            , url: '/sys/permission/list'
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                }
            }
            , title: '权限数据表'
            , cellMinWidth: 200
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', hide: true, width: 80}
                , {field: 'name', title: '权限名称',}
                , {field: 'keyword', title: '权限关键词',}
                , {field: 'description', title: '权限描述'}
            ]]
            , page: true
        });

        initZtree();
        var zTreeObj, setting = {
            view: {
                selectedMulti: false
            },
            check: {
                enable: true,
                chkboxType: {"Y": "ps", "N": "ps"}
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function initZtree() {
            $.get("/sys/permission/ztreeList", function (res) {
                var zNodes = res.data;
                zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
            });
        }
    });
</script>
</html>